


<li class="dropdown">
    <a href="{{ account }}" title="{{ text_mobile }}" class="dropdown-toggle" data-toggle="dropdown">
        <i class="icon-mobile-phone" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm hidden-md">{{ text_mobile }}</span>
        <span class="caret"></span>
    </a>
    <div class="dropdown-menu dropdown-menu-center dropdown-menu-qrcode">
        {#<img id="download_app_qr_code"/>#}
        <img src="{{ qr_code }}"/>
        <p>{{ text_scan_download }}</p>
        <img class="dropdown-menu-qrcode-logo" src="{{ icon_url }}">
    </div>
</li>
<script src="/catalog/view/javascript/libs/qrcode-generator.js"></script>
<script>

   $(function () {

       /**
        * 加载二维码
        */
       function loadQrCodeImage(cb) {
           var download_url = '{{ download_url }}';
           var typeNumber = 8;
           var errorCorrectionLevel = 'H';
           var qr = qrcode(typeNumber, errorCorrectionLevel);
           qr.addData(download_url);
           qr.make();
           var url = qr.createDataURL(2, 0);
           var image = new Image();
           image.src = url;
           image.onload = function () {
               cb.call(null, this);
           };
       }

       /**
        * 加载icon
        */
       function loadIconImage(cb) {
           var icon_url = '{{ icon_url }}';
           var image = new Image();
           image.src = icon_url;
           image.onload = function () {
               cb.call(null, this);
           };
       }

       /**
        * 加载所有资源
        */
       function allResourceLoadComplete(cb) {
           var resource_count = 2;
           var complate_count = 0;
           var qr_code_image = null;
           var icon_image = null;
           loadQrCodeImage(function (image) {
               complate_count = complate_count +1;
               qr_code_image = image;
              if (complate_count === resource_count){
                  cb.call(null, qr_code_image, icon_image)
              }
           });
           loadIconImage(function (image) {
               complate_count = complate_count +1;
               icon_image = image;
               if (complate_count === resource_count){
                   cb.call(null, qr_code_image, icon_image)
               }
           })
       }

       /**
        *  创建canvas
        */
       function createCanvas(qr_code_image, icon_image, size, ratio) {
           var canvas = document.createElement('canvas');
           var ctx = canvas.getContext("2d");
           canvas.width = size;
           canvas.height = size;
           var source_widht = icon_image.width;
           var source_height = icon_image.height;
           var dest_width = size * ratio;
           var dest_height = size * ratio;
           var offset_left = (size - dest_width) /2;
           var offset_top = (size - dest_height) /2;
           ctx.fillStyle='#ffffff';
           ctx.fillRect( 0, 0, 200, 200);
           ctx.drawImage(qr_code_image, 0, 0, 200, 200);
           ctx.drawImage(icon_image, 0, 0, source_widht, source_height, offset_left, offset_top, dest_width , dest_height);
           return canvas.toDataURL('image/jpeg');
       }

       /**
        * 开始执行
        */
       // allResourceLoadComplete(function (qr_code_image, icon_image) {
       //     var data_url = createCanvas(qr_code_image, icon_image, 200, 0.25);
       //     document.getElementById('download_app_qr_code').src = data_url;
       // });

   })
</script>